<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>销售订单录入</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <card>
<shiro:hasPermission name="xxddlr:add">
        <i-button type="primary" icon="ios-search" @click="toAdd" >录入销售订单</i-button>
</shiro:hasPermission>
    </card>

    <i-table highlight-row :columns="myColumns" :data="pageResult.rows" :height="400" border stripe  @on-selection-change="tableSelection=arguments[0]"   @on-row-dblclick="rowClick">
        <template slot-scope="{row}" slot="type">
            <span>{{row.type==1?"采购":"销售"}}</span>
        </template>
        <template  slot-scope="{row}" slot="state">
            <span>{{row.state==0?"未出库":"已入库"}}</span>
        </template>
    </i-table>
    <modal v-model="addFlag" title="添加订单"width="700px">
        <i-form :label-width="50" >
            <form-item label="客户:">
                <i-select v-model="order.providerId" style="width: 300px"  filterable>
                    <i-Option v-for="item in kehuList" :value="item.id" :key="item.id">{{item.kehuName}}</i-Option>
                </i-select>
            </form-item>
        </i-form>
        <div style="margin-top: -5px;">
            <span style="font:16px bolder ">销售订单-商品列表</span>
            <hr>
        </div>
        <i-button  type="primary" icon="ios-add-circle" @click="handleAdd">增加</i-button>
        <i-table  :columns="myColumns1" :data="mydata2" :height="250" border stripe >

        </i-table>
        <div slot="footer">
            <i-button  type="success" @click="add" >提交</i-button >
        </div>
    </modal>

    <modal  v-model="OrderFlag" title="订单详请" width="700">
        <div style="width: 660px;height: 100px ;border: 0.5px lightgray solid">
            <i-form :label-width="80" >
                <form-item label="流水号:"style="float: left;">
                    <i-input v-model="order.id" size="large" style="width: 110px;text-align: center"readonly/>
                </form-item>
                <form-item label="录入日期:" style="float: left">
                    <i-input  style="width: 130px;" v-model="order.createTime" size="large"readonly/>
                </form-item>
                <form-item label="出库日期:"style="float: left">
                    <i-input  style="width: 130px;text-align: center" v-model="order.stockTime" size="large"readonly/>
                </form-item>
                <form-item label="销售员:"style=" margin-top:-10px;float: left">
                    <i-input   style="width: 110px;text-align: center"v-model="order.creatorName" size="large"readonly/>
                </form-item>
                <form-item label="库管员:"style="margin-top:-10px;float: left">
                    <i-input  style="width: 130px;text-align: center" v-model="order.stockKeeperName" size="large"readonly/>
                </form-item>
                <form-item label="客户:"style="margin-top:-10px;float:left">
                    <i-input  style="width: 130px;text-align: center" v-model="order.providerIdName" size="large"readonly/>
                </form-item>
            </i-form>
        </div>
        <i-table style="clear:both;" :columns="Columns1"  :data="mydata1" :height="200" border stripe >

            <template  slot-scope="{row}" slot="state">
                <span>{{row.state==1?"已出库":"未出库"}}</span>
            </template>
        </i-table>
        <div slot="footer">
            <i-button type="info" icon="md-archive" @click="caiDao">导出</i-button>
            <i-button type="error" icon="ios-print-outline" @click="exportPdf">打印浏览</i-button>
        </div>
    </modal>
    <Page :total="pageResult.total"
          :page-size="pageSize"
          @on-change="pageNo=arguments[0];searchXsOrderList();"
          show-sizer
          :page-size-opts="[5,10,15]"
    <%--	@on-page-size-change切换每页条数时的回调，返回切换后的每页条数--%>
          @on-page-size-change="pageSize=arguments[0];searchXsOrderList();"
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            myColumns:[
                {title:"编号",key: "id",align:"center"},
                {slot:"type",title:"类型",align:"center"},
                {title:"录入日期",key: "createTime",align:"center",width:119},
                {title:"出库日期",key: "stockTime",align:"center",width:119},
                {title:"销售员",key: "creatorName",align:"center"},
                {title:"库管员",key: "stockKeeperName",align:"center"},
                {title:"客户",key: "providerIdName",align:"center"},
                {title:"合计金额",key: "totalMoney",align:"center"},
                {slot:"state",title:"状态",align:"center"},
               // {title:"运单号",key: "wayBillCode",align:"center",width:119},
            ],
            Columns1:[
                {title:"编号",key: "id",align:"center"},
                {title:"商品编号",key: "goodsId",align:"center",width:119},
                {title:"商品名称",key: "goodsName",align:"center",width:119},
                {title:"商品价格",key: "price",align:"center",width:119},
                {title:"数量",key: "num",align:"center"},
                {title:"金额 ",key: "money",align:"center"},
                {title:"状态",slot: "state",align:"center"},
            ],
            pageResult:{
                rows:[],
                total:50,
            },
            myColumns1: [
                {title: "商品编号",
                    key: "goodsId",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.goodsId=_this.mydata2[params.index].goodsId,
                                    readonly:"true"
                                },
                                on: {
                                    "on-blur": event => {
                                        if(event.target.value==null){
                                            return _this.$Message.warning("编号不能为空")
                                        }
                                        params.row.goodsId = event.target.value;
                                        _this.mydata2[params.index].goodsId = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });
                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.goodsId);
                        }
                    }
                },
                {
                    title: "商品名称",
                    key:"goodsName",
                    width:"120",
                    render: (h, params) => {
                        return h('i-select', {
                                props: {
                                    filterable:"true",
                                },
                                on: {
                                    'on-change':(event) => {
                                            axios.get(`${ctx}/jibenxinxi/sp/list3?id=${event}`)
                                                .then(({data})=>{
                                                    _this.goodsList1=data.result;
                                                    _this.mydata2[params.index].goodsName=_this.goodsList1.name
                                                    params.row.goodsName=_this.mydata2[params.index].goodsName
                                                    _this.mydata2[params.index].goodsId= _this.goodsList1.id
                                                    _this.mydata2[params.index].price=_this.goodsList1.sellingPrice
                                                });
                                    },
                                },
                            },
                            _this.goodsList.map(function(type){//这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
                                return h('Option', {
                                    props:{
                                        value:type.id,
                                        label:type.name,
                                    },
                                    style:{
                                        fontSize: '14px',
                                        cursor: 'pointer',
                                        color: 'blue',
                                    }
                                }, type);
                            })
                        )
                    },
                },
                {
                    title: "价格",
                    key: "price",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.price=_this.mydata2[params.index].price,
                                    readonly:"true"
                                },
                                on: {
                                    "on-blur": event => {
                                        params.row.price = event.target.value;
                                        _this.mydata2[params.index].price = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });
                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.price);
                        }
                    }
                },
                {
                    title: "数量",
                    key: "num",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.num,
                                },
                                on: {
                                    "on-blur": event => {
                                        if(event.target.value<0||event.target.value==null||event.target.value==0){
                                            return _this.$Message.warning("数量不能为空且必须大于零")
                                        }
                                        if(params.row.goodsName<0||params.row.goodsName==null||params.row.goodsName==0){
                                            return _this.$Message.warning("请选择商品")
                                        }
                                        params.row.num = event.target.value;
                                        _this.mydata2[params.index].num = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },
                                }
                            });

                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.num);
                        }

                    },
                },
                {
                    title: "金额",
                    key: "money",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.money=(params.row.num * params.row.price).toFixed(2),
                                    readonly:"true"
                                },
                                on: {
                                    "on-blur": event => {
                                        params.row.money = event.target.value;
                                        _this.mydata2[params.index].money = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });

                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.money=(params.row.num * params.row.price).toFixed(2));
                        }

                    },
                },
                {
                    title: "操作",
                    key: "action",
                    width:80,
                    render: (h, params) => {
                        return h('div', [
                            h('i-Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    "click": (index, row) => {
                                        _this.mydata2.splice(index, 1)                                    }
                                }
                            }, '删除'),
                            h('i-Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        if (params.row.$isEdit) {
                                            if(params.row.num<0||params.row.num==null||params.row.num==0){
                                                return _this.$Message.warning("数量不能为空且必须大于零")
                                            }
                                            _this.handleSave(params.row)
                                        } else {
                                            if(params.row.goodsName<0||params.row.goodsName==null||params.row.goodsName==0){
                                                return _this.$Message.warning("请选择商品")
                                            }
                                            _this.handleEdit(params.row)
                                        }
                                    }
                                }
                            }, params.row.$isEdit ? '保存' : '编辑'),

                        ])}
                }
            ],
            $isEdit:[],
            mydata2: [],
            mydata1:[],
            pageNo:1,
            pageSize:5,
            order:{
                orderDetail:[],
            },
          //  AdGoods:{},
            kehuList:[],
            goodsList:[],
            goodsList1:{},
          //  ByNamegoodsList:[],
         //   tableSelection:[],
            addFlag:false,
            OrderFlag:false,
        },
        mounted(){
            _this=this;
            this.searchXsOrderList();
            this.searchKehuList();
            this.searchGoodsList();
        },
        methods:{
            searchXsOrderList(){
                axios.get(`${ctx}/sal/xxddlr/search2/${this.pageNo}/${this.pageSize}`)
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchKehuList(){
                axios.get(`${ctx}/jibenxinxi/kehu/list`)
                    .then(({data})=>{
                        this.kehuList=data.result;
                    });
            },
            searchGoodsList(){
                axios.get(`${ctx}/jibenxinxi/sp/list`)
                    .then(({data})=>{
                        this.goodsList=data.result;
                    });
            },
            handleEdit (row) {
                this.$set(row, '$isEdit', true)

            },
            handleSave (row) {
                this.$set(row, '$isEdit', false)
            },
            toAdd(){
                this.order={};
                this.mydata2=[];
                this.addFlag=true;

            },
            add(){
                if(this.mydata2.length<1){
                    return this.$Message.error("商品信息不能为空")
                }
                this.order.orderDetail=this.mydata2
                axios.post(`${ctx}/sal/xxddlr/add`,this.order)
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.searchXsOrderList();
                    });
            },
            handleAdd() {
                if(this.order.providerId==null||this.order.providerId==0){
                    return this.$Message.error("请先选择客户");
                }
                let row = {
                    num:"0",
                    money:"0",
                }
                this.mydata2.push(row)
            },
            handleDelete(index, row) {
                this.mydata2.splice(index, 1)
            },
            //点击弹出订单详情
            rowClick(data1,index){//data 该行数据 ，index该行索引
                axios.get(`${ctx}/sal/xxddlr/list?id=${data1.id}`)
                    .then(({data})=>{
                        this.mydata1=data.result;
                        Object.assign(this.order,data1);
                        this.OrderFlag=true
                    })
            },
            caiDao(){


                //获得你要携带的参数
                location.href=`${ctx}/sal/xxddck/exportE?id=${this.order.id}
                 &providerIdName=${this.order.providerIdName}
                &creatorName=${this.order.creatorName}

                &stockKeeperName=${this.order.stockKeeperName}
                `

            },
            exportPdf(){
                location.href=`${ctx}/sal/xxddck/exportP?id=${this.order.id}
                 &providerIdName=${this.order.providerIdName}
                &creatorName=${this.order.creatorName}

                &stockKeeperName=${this.order.stockKeeperName}
                `

            }
        }
    })
</script>
</body>
</html>
